 /*
 * @description: 优惠券(选择学校和代理)
 * @Author: along
 * @Date: 2020-11-16
 * @Last Modified by: along
 * @Last Modified time: 2020-11-17
 */
<template>
    <div class="couponLimit">
        <!-- header -->
        <div class="header">
            <div
                class="school"
                :style="{color: tIndex == 0 ? 'rgba(24, 144, 255, 1)' : 'rgba(51, 51, 51, 1)'}"
                @click="handleChange(0)"
            >
                学校
            </div>
            <div
                class="level"
                :style="{color: tIndex == 1 ? 'rgba(24, 144, 255, 1)' : 'rgba(51, 51, 51, 1)'}"
                @click="handleChange(1)"
            >
                代理
            </div>
            <div
                class="line"
                :style="{left: tIndex * 299 + 'px'}"
            />
        </div>

        <!-- content -->
        <div class="content">
            <!-- 学校 -->
            <div
                v-show="tIndex == 0"
                class="left"
            >
                <!-- 无数据 -->
                <div
                    v-if="!schoolData.length"
                    class="left_no"
                >
                    <div class="left_no_title">
                        未选择学校时,代表所有学校均可参与
                    </div>
                    <div class="left_no_desc">
                        如果想指定部分学校可用，可点击下方按钮
                    </div>
                    <div
                        class="left_no_button"
                        @click="changeSchool()"
                        :style="{pointerEvents: ifedit ? 'none' : ''}"
                    >
                        选择学校
                    </div>
                    <div class="left_no_line" />
                </div>

                <!-- 有数据 -->
                <div
                    v-else
                    class="left_no"
                >
                    <div class="filter">
                        <el-button
                            size="medium"
                            type="primary"
                            :style="{width: '130px', pointerEvents: ifedit ? 'none' : ''}"
                            @click="showChooseSchool = true"
                        >
                            修改已选学校
                        </el-button>
                    </div>
                    <el-table
                        :data="schoolData"
                        height="100%"
                        style="width: 100%;max-height:500px"
                        border
                    >
                        <el-table-column
                            prop="id"
                            label="学校id"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        />
                        <el-table-column
                            prop="name"
                            label="学校名称"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="left"
                        />
                        <el-table-column
                            label="操作"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="deleteSchool(scope.row)"
                                    :style="{pointerEvents: ifedit ? 'none' : ''}"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- /分页 -->
                    <div class="pagination-wrapper-main">
                        <p :style="{color: 'rgba(51, 51, 51, 1)'}">
                            已选学校
                            <span :style="{color: 'rgba(245, 51, 65, 1)'}">({{ page.total_count }})</span>
                        </p>
                        <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page.sync="page.now_page"
                            :total="page.total_count"
                            :page-size="page.page_size"
                            @current-change="changePage"
                        />
                    </div>
                </div>
            </div>

            <!-- 代理 -->
            <div
                v-show="tIndex == 1"
                class="right"
            >
                <!-- 无数据 -->
                <div
                    v-if="!leavelList.length"
                    class="left_no"
                >
                    <div class="left_no_title">
                        未选择代理时，代表等级的代理均可参与
                    </div>
                    <div class="left_no_desc">
                        如果想指定部分学校可用，可点击下方按钮
                    </div>
                    <div
                        class="left_no_button"
                        @click="changeLevel()"
                        :style="{pointerEvents: ifedit ? 'none' : ''}"
                    >
                        选择代理
                    </div>
                    <div class="left_no_line" />
                </div>

                <!-- 有数据 -->
                <div
                    v-else
                    class="left_no"
                >
                    <div class="filter">
                        <el-button
                            size="medium"
                            type="primary"
                            :style="{width: '130px', pointerEvents: ifedit ? 'none' : ''}"
                            @click="dialogLeavel = true"
                        >
                            修改已选代理
                        </el-button>
                    </div>
                    <el-table
                        :data="leavelList"
                        height="100%"
                        style="width: 100%;max-height:500px"
                        border
                    >
                        <el-table-column
                            prop="id"
                            label="精英代理登记"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                {{ scope.row | filterLeavel }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="deleteLeavel(scope.row.$index)"
                                    :style="{pointerEvents: ifedit ? 'none' : ''}"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-wrapper-main">
                        <p :style="{color: 'rgba(51, 51, 51, 1)'}">
                            已选精英
                            <span :style="{color: 'rgba(245, 51, 65, 1)'}">({{ leavelList.length }})</span>
                        </p>
                        <p/>
                    </div>
                </div>
            </div>
        </div>

        <!-- 选择学校 -->
        <el-dialog
            title="选择学校"
            width="1048px"
            custom-class="choose-dialog"
            :visible.sync="showChooseSchool"
        >
            <div :style="{display: 'flex', alignItems: 'center'}">
                <el-cascader
                    v-model="selectedCity"
                    placeholder="请选择城市"
                    :options="cities"
                    :props="props"
                    filterable
                    size="small"
                    style="width: 120px;margin-right: 30px"
                    @change="fnChangeCity"
                />
                <el-input
                    placeholder="请输入搜索内容"
                    v-model.trim="searchKey"
                    size="small"
                    style="width: 380px"
                    @keyup.native.enter="fnSearchSchool()"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="fnSearchSchool()"
                    />
                </el-input>
            </div>
            <div class="el-tag-school">
                <el-tag
                    :key="tag"
                    v-for="tag in selectedSchools"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ JSON.parse(tag).name }}
                </el-tag>
            </div>
            <div class="splider" />
            <div class="school-list">
                <div
                    class="empty"
                    v-if="schoolList.length <= 0"
                >
                    请切换城市
                </div>
                <el-checkbox-group
                    v-model="selectedSchools"
                    size="small"
                    v-else
                >
                    <el-checkbox-button
                        v-for="(school, schoolIndex) in schoolList"
                        :label="JSON.stringify({
                            id: school.id,
                            name: school.name
                        })"
                        :key="schoolIndex"
                    >{{ school.name }}</el-checkbox-button>
                </el-checkbox-group>
            </div>
            <el-button
                type="primary"
                size="medium"
                class="submit-btn"
                @click="showChooseSchool = false"
                :style="{width: '120px',marginLeft: '50%', marginTop: '12px', transform: 'translateX(-50%)'}"
            >确定</el-button>
        </el-dialog>

        <!-- 选择代理 -->
        <el-dialog
            title="选择代理"
            width="612px"
            custom-class="choose-dialog"
            :visible.sync="dialogLeavel"
            class="dialogLeavel"
        >
            <el-checkbox-group
                v-model="leavelList"
                :style="{paddingLeft: '32px'}"
            >
                <el-checkbox
                    :label="0">
                    E0
                </el-checkbox>
                <el-checkbox
                    :label="1">
                    E1
                </el-checkbox>
                <el-checkbox
                    :label="2">
                    E2
                </el-checkbox>
                <el-checkbox
                    :label="3">
                    E3
                </el-checkbox>
                <el-checkbox
                    :label="4"
                    :style="{marginTop: '24px'}"
                >
                    E4
                </el-checkbox>
                <el-checkbox
                    :label="5">
                    E5
                </el-checkbox>
            </el-checkbox-group>
            <div :style="{width: '100%', display: 'flex', justifyContent: 'center', marginTop: '32px'}">
                <!-- <el-button
                    size="medium"
                    type="default"
                    :style="{width: '120px', marginRight: '36px'}"
                    @click="dialogLeavel = false"
                >
                    取 消
                </el-button> -->
                <el-button
                    size="medium"
                    type="primary"
                    :style="{width: '120px'}"
                    @click="dialogLeavel = false"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

const SCHOOL = {
    // 添加学校权限
    showChooseSchool: false,
    selectedCity: [],
    cities: [],
    searchKey: '',
    // 弹窗当前显示学校集合
    schoolList: [],
    // 当前选中的学校
    selectedSchools: [],
    //所有学校集合
    city_schools: {},
    props: {
        value: 'id',
        label: 'name',
        children: 'children'
    },
    page: {
        now_page: 1,
        total_count: 0,
        page_size: 0
    },
    schoolPageList: [],//学校分页数据
    schoolDataCopy: [],//存储全部数据,用于删除
};

const LEAVEL = {
    dialogLeavel: false,
    leavelData: [{value: 0, label: 'L0'},{value: 1, label: 'L1'},{value: 2, label: 'L2'},{value: 3, label: 'L3'},{value: 4, label: 'L4'},{value: 5, label: 'L5'},{value: 6, label: 'L6'}],
    leavelList: []//选择代理数据
};

export default {
    props: {
        ifedit: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            ...LEAVEL,
            ...SCHOOL,
            tIndex: 0,
            schoolData: [],//选择学校数据
        };
    },
    watch: {
        selectedSchools: {
            handler: function (val, oldVal) {
                // console.log(val);
            },
            deep: true
        },
        showChooseSchool (val) {
            if(!val) {
                let list = [];

                this.selectedSchools.forEach(el => {
                    list.push(JSON.parse(el));
                });
                this.schoolDataCopy = JSON.parse(JSON.stringify(list));
                this.schoolPage(list);
            }
        },
        dialogLeavel (val) {
            if(!val) {
                this.$emit('level', this.leavelList);
            }
        }
    },
    filters: {
        filterLeavel (val) {
            if(val == 0) return 'E0精英';
            if(val == 1) return 'E1精英';
            if(val == 2) return 'E2精英';
            if(val == 3) return 'E3精英';
            if(val == 4) return 'E4精英';
            if(val == 5) return 'E5精英';
            if(val == 6) return 'E6精英';
        }
    },
    mounted () {
        this.fnGetSchoolList();
    },
    methods: {
        /**
         * @description 切换类型
         */
        handleChange (type) {
            // this.tIndex = type;

            if(type !== this.tIndex) {
                this.$notify({
                    title: '提示',
                    message: type == 0 ? '请先选择指定学院可领' : '请先选择指定代理可领',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * @description 父组件切换类型
         */
        setType (type) {
            this.tIndex = type;
            // this.$emit('change', type);
        },

        /**
         * @description 回填学校数据
         */
        setSchool (list) {
            let data = [];

            this.fnGetSchoolList();
            this.schoolDataCopy = JSON.parse(JSON.stringify(list));
            list.forEach(el => {
                data.push(JSON.stringify(el));
            });
            this.schoolPage(list);
            this.selectedSchools = data;
            // console.log('selectedSchools', this.selectedSchools);
        },

        /**
         * @description 回填代理数据
         */
        setLeavel (list) {
            this.tIndex = 1;
            this.leavelList = list;
        },

        /**
         * @description 选择学校
         */
        changeSchool () {
            this.showChooseSchool = true;
        },

        /**
         * @description 删除学校
         */
        deleteSchool (row) {

            //回显数据处理
            const filterData = list => {
                if(!list.length) return [];
                let data = [];

                list.forEach(el => {
                    data.push(JSON.stringify(el));
                });
                this.selectedSchools = data;
            };
            const list = this.schoolDataCopy.filter(item => ![row.id].includes(item.id));

            filterData(list);
            this.schoolDataCopy = list;
            this.schoolPage(this.schoolDataCopy);
        },

        /**
         * @description 点击分页
         */
        changePage (page) {
            this.schoolData = this.schoolPageList[page - 1];
        },

        /**
         * @description 处理分页
         */
        schoolPage (list) {
            this.$emit('school', this.schoolDataCopy);
            if(!list.length) {
                this.page.now_page = 1;
                this.page.page_size = 10;
                this.page.total_count = 0;
                this.schoolPageList = [];
                this.schoolData = [];
                return false;
            }
            this.page.now_page = 1;
            this.page.page_size = 10;
            this.page.total_count = list.length;

            let data = [];

            for(let key=0; key<list.length; key+=10) {
                data.push(list.slice(key, key + 10));
            }

            this.schoolPageList = data;
            this.schoolData = data[0];
        },

        /**
         * @description 选择代理
         */
        changeLevel () {
            this.dialogLeavel = true;
        },

        /**
         * @description 删除已选代理
         */
        deleteLeavel (id) {
            this.leavelList.splice(id, 1);
            this.$emit('level', this.leavelList);
        },

        /**
         * @description 获取学校数据列表
         */
        fnGetSchoolList() {
            this.$post('/student/local_info%5Cschool_tree', {
            }, resp => {
                if (resp.code == 1) {
                    // 将学校与省市剥离,方便显示以及遍历
                    let tree = resp.data.tree;
                    let cityTmp = [];
                    let schoolTmp = {};

                    tree.forEach(item => {
                        let provinceTmp = {
                            id: item.id,
                            name: item.name,
                            children: []
                        };

                        if (item.children) {
                            item.children.forEach((city) => {
                                provinceTmp.children.push({
                                    id: city.id,
                                    name: city.name
                                });
                                schoolTmp['city_' + city.id] = city.children;
                            });
                        }
                        cityTmp.push(provinceTmp);
                    });

                    this.cities = cityTmp;
                    this.city_schools = schoolTmp;
                    this.selectedCity = [12, 88];
                    this.fnChangeCity();
                }
            });
        },

        /**
         * @description 学校权限
         */
        fnChangeCity() {
            if (this.selectedCity.length >= 2) {
                this.schoolList = this.city_schools['city_' + this.selectedCity[1]];
                this.searchKey = '';
            } else {
                this.schoolList = [];
                this.searchKey = '';
            }
        },
        fnSearchSchool() {
            if (this.selectedCity.length >= 2) {
                this.schoolList = this.city_schools['city_' + this.selectedCity[1]].filter(item => {
                    if (!this.searchKey) {
                        return true;
                    }
                    return item.name.indexOf(this.searchKey) > -1;
                });
            } else {
                this.schoolList = [];
            }
        },

        /**
         * @description 移除学校
         */
        handleClose (tag) {
            this.selectedSchools.splice(this.selectedSchools.indexOf(tag), 1);
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.couponLimit {
    width: 598px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    .header {
        width: 100%;
        height: 54px;
        position: relative;
        border-bottom: 1px #DCDFE6 solid;
        display: flex;
        align-items: center;
        cursor: pointer;
        .school, .level {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            font-weight: 500;
        }
        .line {
            width: 299px;
            height: 1px;
            background-color: rgba(24, 144, 255, 1);
            position: absolute;
            bottom: 0;
            left: 0;
            transition: all .2s;
        }
    }
    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .left, .right, .left_no, .right_no {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .left_no_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                font-weight: 500;
                margin: 62px 0 16px 0;
            }
            .left_no_desc {
                color: rgba(51, 51, 51, 1);
                font-size: 12px;
                margin-bottom: 20px;
            }
            .left_no_button {
                width: 130px;
                height: 36px;
                text-align: center;
                line-height: 36px !important;
                cursor: pointer;
                border-radius: 4px;
                border: 1px rgba(24, 144, 255, 1) solid;
                color: rgba(24, 144, 255, 1);
                font-size: 14px;
            }
            .left_no_line {
                width: 100%;
                height: 1px;
                background-color: rgba(220, 223, 230, 1);
                margin-top: 60px;
                margin-bottom: 50px;
            }
            .filter {
                height: 36px;
                margin: 20px 24px;
                display: flex;
                justify-content: flex-end;
                width: calc(100% - 48px);
            }
        }
    }
    .el-tag-school {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 10px;
        margin-top: 20px;
        .el-tag{
            margin-right: 10px;
            margin-bottom: 10px;
            height: 32px;
            display: flex;
            align-items: center;
        }
    }
    /* 分页 */
    .pagination-wrapper-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        box-sizing: border-box;
        border-left: 1px #EBEEF5 solid;
        border-right: 1px #EBEEF5 solid;
        border-bottom: 1px #EBEEF5 solid;
        padding: 21px 26px 10px 11px;
        width: 100%;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
            display: flex;
            align-items: center;
        }
    }
}
</style>

<style lang="less">
.couponLimit {
    div, p {
        line-height: normal;
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .el-table th, .el-table tr {
        background-color: #ffffff;
    }
    .tableDateMain {
        .el-table__body-wrapper {
            max-height: 420px;
        }
    }
    .el-checkbox-button {
      margin-right: 10px;
      margin-bottom: 10px;
      border-radius: 0;
    }
    .el-checkbox-button:first-child .el-checkbox-button__inner {
      border-radius: 2;
    }
    .el-checkbox-button__inner {
      border-left: 1px solid #dcdfe6;
      font-size: 12px;
      font-weight: 400;
      color: rgba(126, 137, 147, 1);
      border-radius: 2px;
      position: relative;
    }
    .el-checkbox-button.is-checked .el-checkbox-button__inner {
      background-color: #fff;
      border: 1px solid rgba(32, 160, 255, 1);
      color: #20a0ff;
      box-shadow: none;
      overflow: hidden;
      &::after {
        content: " ";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 18px;
        background-image: url(//cdn.zsdx.cn/admin/images/common/checked.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
    .el-input-group__append .el-button, .el-input-group__append .el-select, .el-input-group__prepend .el-button, .el-input-group__prepend .el-select {
        margin: -4px -27px;
    }
    .el-table__body-wrapper {
        max-height: 500px;
    }
    .dialogLeavel .el-dialog {
        margin-top: 15vh !important;
    }
}
</style>
